<!-- 中医药门急诊占比 -->
<template>
    <div id="outpatient"></div>
</template>
<script>
import * as echarts from "echarts";
import { getOutpatientData } from "../../commonJs/data";
import Mock from 'mockjs'
export default {
    data() {
        return {
            formData: [
                {
                    name: "人民医院",
                    VALUE1: "13",
                },
                {
                    name: "二院",
                    VALUE1: "13",
                },
                {
                    name: "中医院",
                    VALUE1: "41",
                },
                {
                    name: "妇幼保健",
                    VALUE1: "14",
                },
                {
                    name: "乡镇卫生院",
                    VALUE1: "14",
                },
            ],
        };
    },
    mounted() {
        this.setEcharts();
        //this.setEcharts(this.formData);
    },
    methods: {
        //设置echarts

        setEcharts() {
            var data = [
                {
                    name: "人民医院",
                    VALUE1: 0,
                    VALUE2: 0,
                },
                {
                    name: "第二人民医院",
                    VALUE1: 0,
                    VALUE2: 0,
                },
                {
                    name: "中医院",
                    VALUE1: 0,
                    VALUE2: 0,
                },
                {
                    name: "妇幼保健院",
                    VALUE1: 0,
                    VALUE2: 0,
                },
                {
                    name: "乡镇卫生院",
                    VALUE1: 0,
                    VALUE2: 0,
                },
            ];
            let responseData = [{ VALUE1: Mock.Random.integer(15000, 20000), VALUE2: Mock.Random.float(20, 50,1,2) },
            { VALUE1: Mock.Random.integer(13000, 20000), VALUE2: Mock.Random.float(20, 50,1,2) },
            { VALUE1: Mock.Random.integer(11000, 20000), VALUE2: Mock.Random.float(20, 50,1,2) },
            { VALUE1: Mock.Random.integer(9000, 15000), VALUE2: Mock.Random.float(20, 50,1,2) },
            { VALUE1: Mock.Random.integer(5000, 10000), VALUE2: Mock.Random.float(20, 50,1,2) }]

            responseData.forEach((item, index) => {
                data[index].VALUE1 = parseInt(item.VALUE1);
                // data[index].VALUE2 = parseFloat(item.VALUE2.substring(0, item.VALUE2.length - 1));
                data[index].VALUE2 = item.VALUE2
            });
            let outpatient = echarts.init(
                document.getElementById("outpatient")
            );
            var xData = [],
                yData = [];
            var min = 50;
            data.map(function (a, b) {
                xData.push(a.name);
                if (a.VALUE2 === 0) {
                    yData.push(a.VALUE2 + min);
                } else {
                    yData.push(a.VALUE2);
                }
            });
            let option = {
                color: ["#3398DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            opacity: 0,
                        },
                    },
                    formatter: function (prams) {
                        if (prams[0].data === min) {
                            return "0%";
                        } else {
                            return "" + prams[0].data + "%";
                        }
                    },
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: "0%",
                    right: "0%",
                    bottom: "5%",
                    top: "14%",
                    height: "85%",
                    containLabel: true,
                    z: 22,
                },
                xAxis: [
                    {
                        type: "category",
                        gridIndex: 0,
                        data: xData,
                        axisTick: {
                            alignWithLabel: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#0c3b71",
                            },
                        },
                        axisLabel: {
                            interval: 0,
                            show: true,
                            color: "#fff",
                            fontSize: 16,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        gridIndex: 0,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        min: 0,
                        max: 100,
                        axisLine: {
                            lineStyle: {
                                color: "#0c3b71",
                            },
                        },
                        axisLabel: {
                            fontSize: 16,
                            color: "#fff",
                            formatter: "{value} %",
                        },
                    },
                    {
                        type: "value",
                        gridIndex: 0,
                        min: min,
                        max: 100,
                        splitNumber: 12,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: [
                                    "rgba(250,250,250,0.0)",
                                    "rgba(250,250,250,0.05)",
                                ],
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "中医药门急诊占比",
                        type: "bar",
                        barWidth: "25%",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        label: {
                            //图形上的文本标签
                            normal: {
                                show: true,
                                position: "top",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 16,
                                },
                                formatter: (params) => {
                                    return (
                                        data.find((item) => {
                                            return item.name == params.name;
                                        }).VALUE1 + '人\n' + params.value + '%'
                                    );
                                },
                            },
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#00feff",
                                        },
                                        {
                                            offset: 0.5,
                                            color: "#027eff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#0286ff",
                                        },
                                    ]
                                ),
                            },
                        },
                        data: yData,
                        zlevel: 11,
                    },
                ],
            };
            outpatient.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#outpatient {
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
</style>